<template>


    <div :style="{ display: 'flex',height: '100%' }">
        <a-card
                class="card"
                title="找伙伴"
                hoverable
                :style="{boxShadow: '#eee 20px 15px 25px'}"
        >
            <a-form ref="formRef" size="medium" :model="form" :style="{width:'80%'}" @submit="handleSubmit">

                <!--描述-->
                <a-form-item field="form.description" label="描述">
                    <a-textarea placeholder="在这里输入兴趣描述,不能超过150个字"
                                :max-length="150"
                                allow-clear
                                show-word-limit
                                v-model="form.description"
                                :auto-size="{ minRows:2, maxRows:4}"
                    />

                </a-form-item>


                <a-form-item label="标签">
                    <a-input-tag
                            v-model="tags"
                            :style="{width:'100%'}" placeholder="输入标签名，按下回车生成标签"
                            :max-tag-count="6" allow-clear
                            @press-enter="test"
                            unique-value="true"

                    />
                </a-form-item>

                <!--图片-->
                <a-form-item field="form.imageUrl" label="图片">

                    <a-space direction="vertical">
                        <a-upload
                                action="http://47.113.195.180:8081/api/get/url"
                                :fileList="file?[file]:[]"
                                :show-file-list="false"
                                @change="fileUp"
                                @progress="onProgress"
                                @success="onSuccess"
                        >

                            <template #upload-button>
                                <div
                                        :class="`arco-upload-list-item${file && file.status === 'error' ? ' arco-upload-list-item-error' : ''}`"
                                >
                                    <div class="arco-upload-list-picture custom-upload-avatar" v-if="file && file.url">

                                        <img :src="file.url"/>
                                        <div class="arco-upload-list-picture-mask">
                                            <IconEdit/>
                                        </div>
                                        <!--上传进度-->
                                        <a-progress
                                                v-if="file.status === 'uploading' && file.percent < 100"
                                                :percent="file.percent" type="circle"
                                                size="small"
                                                :style="{position: 'absolute', left: '50%',top: '50%',transform: 'translateX(-50%) translateY(-50%)',}"
                                        />
                                    </div>

                                    <div class="arco-upload-picture-card" v-else>
                                        <div class="arco-upload-picture-card-text">
                                            <IconPlus/>
                                            <div style="margin-top: 10px; font-weight: 600">上传图片</div>
                                        </div>
                                    </div>

                                </div>
                            </template>
                        </a-upload>
                    </a-space>


                </a-form-item>

                <a-form-item>
                    <a-space style="margin-left: 80%">
                        <a-button html-type="submit" style=";margin-top: 50px;width: 100px;"
                                  size="large" @click="publish"
                                  shape="round" type="primary">发布
                        </a-button>

                    </a-space>
                </a-form-item>
            </a-form>


        </a-card>

    </div>

</template>

<script setup>
    import {reactive} from 'vue'
    import message from "@arco-design/web-vue/es/message";
    import {ref} from "@vue/reactivity";
    import myAxios from '../plugins/myAxios';
    import {useRoute} from "vue-router";
    import {useRouter} from "vue-router";
    import {onMounted, watchEffect} from "@vue/runtime-core";
    import {getCurrentUser} from "@/services/user";

    const router = useRouter();
    const route = useRoute();

    const currentUser = ref({})
    currentUser.value = getCurrentUser();

    /*需要填写的帖子内容*/
    const form = reactive({
        description: '',
        imageUrl: '',
    });
    const file = ref();
    const fileUp = (_, currentFile) => {
        file.value = {
            ...currentFile,
        }
    };
    const onSuccess = (res) => {
        form.imageUrl = res.response.data
    }
    //上传进度
    const onProgress = (currentFile) => {
        file.value = currentFile;
    };

    const publish = async () => {

        const res = await myAxios.post('/friends/publish', {
            description: form.description,
            tags: newTags.value,
            imageUrl: form.imageUrl,
        })
        console.log(form)
        if (res.code === 0) {
            message.success("发布成功！")
            const redirectUrl = route.query?.redirect ? route.query.redirect : '/';

            setTimeout(() => {
                window.location.href = redirectUrl
            }, 500);
        } else {
            message.error(res.description ? `${res.description}` : '发布失败！')
        }
    }
    const tags = ref([])
    const newTags=ref([])
    const test = () => {
        newTags.value = tags.value.filter(i => {
            if (i.trim().length === 0||i.trim().length>=8) {
                return false;
            }
            return true;
        })

    }


</script>

<style scoped>

    .list {
        width: 80%;;
        top: 0px;
        left: 0;
        right: 0;
        bottom: 0px;
        margin: auto;
    }

    .arco-upload-picture-card {
        display: flex;
        min-width: 180px;
        height: 180px;
        margin-bottom: 0;

    }

    .arco-upload-list-picture {
        display: flex;
        min-width: 180px;
        height: 180px;

    }

    .card-demo {
        width: 700px;
        margin-left: 300px;
        margin-top: 50px;
        transition-property: all;
    }

    .card-demo:hover {
        transform: translateY(-4px);
    }

    .card {
        width: 800px;
        height: 100%;
        margin-left: 250px;
        margin-top: 0px;

    }

    .icon-hover {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        transition: all 0.1s;
    }

</style>
